
<template>
      <div id="my_dynamic">
		<magic-header titleName="我的动态"></magic-header>
        <section>
            <div v-if="hasDynamic && loadEnd" class="head">
                <ul>
                    <li><img :src="headUrl" alt="" class="headImg"></li>
                    <li class="userName"><img v-show="this.$.userId" class="gender" :src="icon" alt=""><span>{{userName}}</span></li>
                </ul>
            </div>
        </section>
        <section>
   		<ma-scroll :down="true" :getMore="loadMyDynamic" :showMsg="false" :init="true">
          <div v-for="(item, index) in myDynamic" :key="index">
            <dynamic :itemData="item" @removeSuccess="removeDynamic(index,myDynamic)"></dynamic>
          </div>
   		</ma-scroll>
        </section>
        <empty v-if="!hasDynamic" message="暂无动态"></empty>
                <div class="pubButton">
          <i class="iconfont icon-bianji" v-tap="{methods: pubDynamic}"></i>
        </div>
  </div>
</template>
<script>
import magicHeader from "components/magicHeader";
import femal from "assets/femal.png";
import male from "assets/male.png";
import dynamic from "components/myDynamic/my_dynamic";
import my_dynamic from "services/community/my_dynamic";
import empty from "components/empty-page-vfhz";
const COUNT = "5";
export default {
  data() {
    return {
      male: male,
      femal: femal,
      icon: "",
      myDynamic: [],
      userName: "登录后可查看我的动态~",
      headUrl: femal,
      hasDynamic: true,
      loadEnd: false,
      index: 0,
      init: false
    };
  },
  created() {
    let vm = this;
    my_dynamic.bind(this)(
      {
        type: "",
        index: this.index.toString(),
        count: COUNT,
        personalId: this.$.userId,
        methodName: "ListPostByMember"
      },
      res => {
        this.init = true;
        if (res.spaces.length > 0) {
          this.userName = res.userName;
          this.icon = res.genderIcon;
          if (res.hasHead) {
            res.head = this.addPath(res.headUrl);
          }
          this.headUrl = res.headUrl;
          //修改now用于刷新参数
          vm.now = res.spaces[res.spaces.length - 1].publishDate;
          for (var i = 0; i < res.spaces.length - 1; i++) {
            if (res.spaces[i].showTime === res.spaces[i + 1].showTime) {
              res.spaces[i + 1].isShowTime = false;
            }
          }
          vm.myDynamic = res.spaces;
        } else {
          this.hasDynamic = false;
        }
        this.loadEnd = true;
      },
      err => {
        this.$.toast(err);
      }
    );
  },
  methods: {
    loadMyDynamic(callback) {
      this.index += 5;
      let vm = this;
      return new Promise(function(resolve, reject) {
        my_dynamic.bind(vm)(
          {
            type: "",
            index: vm.index.toString(),
            count: COUNT,
            personalId: vm.$.userId,
            methodName: "ListPostByMember"
          },
          res => {
            if (res.spaces.length === 0) {
              vm.$.toast("没有更多动态了!");
            } else {
              vm.now = res.spaces[res.spaces.length - 1].publishDate;
              if (
                res.spaces[0].showTime ===
                vm.myDynamic[vm.myDynamic.length - 1].showTime
              ) {
                res.spaces[0].isShowTime = false;
              }
              for (var i = 0; i < res.spaces.length - 1; i++) {
                if (res.spaces[i].showTime === res.spaces[i + 1].showTime) {
                  res.spaces[i + 1].isShowTime = false;
                }
                vm.myDynamic.push(res.spaces[i]);
              }
              vm.myDynamic.push(res.spaces[4]);
            }
            resolve();
          },
          err => {
            console.log(err);
          }
        );
      });
    },
    pubDynamic() {
      if (this.$.userId) {
        this.$router.push({
          name: "pub_dynamic"
        });
      } else {
        this.$.goLogin({
          name: "login"
        });
      }
    },
    getTime() {
      var d = new Date();
      var yy = d.getFullYear();
      var mm = d.getMonth() + 1;
      var dd = d.getDate();
      var hh = d.getHours();
      var MM = d.getMinutes();
      var ss = d.getSeconds();
      var time =
        yy +
        "-" +
        (mm > 9 ? mm : "0" + mm) +
        "-" +
        (dd > 9 ? dd : "0" + dd) +
        " " +
        hh +
        ":" +
        MM +
        ":" +
        ss;
      return time;
    }
    // removeDynamic(index, list) {
    //   list.splice(index, 1);
    // }
  },
  components: {
    magicHeader,
    dynamic,
    empty
  }
};
</script>
<style scoped="scoped" lang="scss">
#my_dynamic {
  .pubButton {
    position: fixed;
    bottom: 10vh;
    right: 20px;
    z-index: 100;
    text-align: center;
    width: 40px;
    height: 40px;
    background: #f98700;
    border-radius: 50%;
    i {
      line-height: 40px;
      color: #fff;
      font-size: large;
      padding-left: 3px;
    }
  }
  .head {
    display: flex;
    height: 160px;
    width: 100vw;
    background-size: contain;
    background-image: url("../../assets/my-dynamic-bg.png");
    ul {
      padding-top: 20px;
      width: 100%;
      height: 100%;
      text-align: center;
      .headImg {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #fff;
      }
      .userName {
        padding-top: 10px;
        height: 23px;
        line-height: 23px;
        img {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          height: 23px;
          line-height: 23px;
          font-size: 16px;
        }
      }
    }
  }
  .result_empty {
    height: calc(100vh - 50px);
    z-index: 10000;
  }
  #wrapper {
    top: 223px;
  }
}
</style>
<style>
.item-content {
  width: 26vw !important;
  height: 26vw !important;
}
</style>
